<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			height: 200px;
			width: 200px;
			background-color: red;
		}
		p{
			height: 100px;
			width: 100px;
			background-color: blue;
		}
		#dd{
			height: 100px;
			width: 100px;
			margin-top: 40px;
			background-color: red;
		}
	</style>
	<script type="text/javascript">
	window.onload=function	(){
	dd=document.getElementById('dd')
	id1=document.getElementById('id1')
	father=document.getElementById('father')
	dd.onclick=function	rrt(){
		// alert('ewe')
		newp=document.createElement('p')
		newp.style.width="50px";
		newp.style.height="50px"
		newp.style.backgroundColor="#7F7F7F"
		// childNodes[0]是div与p之间的空格/换行
		// father.childNodes[1].appendChild(newp) 
		// id1.parentNode.appendChild(newp)
		// id1.appendChild(newp)
		// 删除节点
		// father.removeChild(id1)
		// 克隆节点
		// cl=id1.cloneNode()
		// father.appendChild(cl)

	}

}
	</script>
</head>
<body>
	<div id="father">
		<p id="id1"></p>
		<p></p>
	</div>
	<div id="dd"></div>
</body>
</html>